<template>
  <transition name="scale">
    <div class="confirm-root" v-show="isShow">
      <div class="content">
        <div class="header" v-show="isShowTitle"><span>{{title}}</span></div>
        <div class="body">
          <span>{{content}}</span>
        </div>
        <div class="footer">
          <button class="btn cancel" @click.stop="onCancel">取消</button>
          <button class="btn confirm" @click.stop="onConfirm">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>
  
<script>
  /*
   * 全局组件 使用方法:
   * let result = await this.$Confirm.show({
   *   title: '标题',
   *   content: '内容内容内容'
   * })
   * 或者
   * let result = await this.$Confirm.show('内容内容内容')
   */
  export default {
    name: 'Confirm',

    data () {
      return {
        isShow: false,
        title: '',
        content: ''
      }
    },

    computed: {
      isShowTitle () {
        return this.title.length > 0
      }
    },

    mounted () {},

    methods: {
      /*
       * 对外暴露全局方法 传入参数可以是字符串 表示内容 或者是以下格式的对象
       * {
       *   title: '标题',
       *   content: '内容内容'
       * }
       *
       * @return 返回一个promise对象 可以使用async函数调用
       */
      show (params) {
        return new Promise((resolve, reject) => {
          this.resolve = resolve
          this.reject = reject
          params = this.checkParams(params)
          this.title = params.title || ''
          this.content = params.content || ''
          this.isShow = true
        })
      },

      onCancel () {
        this.isShow = false
        this.resolve(false)
      },

      onConfirm () {
        this.isShow = false
        this.resolve(true)
      },

      checkParams (params) {
        if (typeof params === 'object') return params
        if (typeof params === 'string') return {content: params}
        return console.error('传入参数有误, 无法调用confirm方法')
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .confirm-root
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    background rgba(0,0,0,0.5)
    font-size 0.35rem
    .content
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
      width 6rem
      height auto
      box-sizing border-box
      overflow hidden
      background #fff
      border-radius 0.2rem
    .header
      height 1rem
      line-height 1.2rem
      text-align center
      font-size 0.4rem
      color #333
      font-weight bold
      overflow hidden
      padding 0 0.6rem
      box-sizing border-box
    .body
      width 100%
      height auto
      max-height 7rem
      padding 0.3rem
      box-sizing border-box
      overflow auto
      text-align center
      color #555
      font-size 0.35rem
    .footer 
      height 1rem
      line-height 1rem
      display flex
      justify-content space-around
      margin-top 0.3rem
      .btn
        width 50%
        height 100%
        border 0
        background #fff
        border-top 1px solid #e4e4e4
        font-size 0.4rem
        color #298ff5
        &.cancel
          border-right 1px solid #e4e4e4
        &.confirm
          font-weight bold
</style>
